<template>
  <el-dialog
    class="nodeDialog custom-dialog"
    modal-class="dialog-center"
    v-model="dialogVisible"
    :show-close='false'
    width="700"
  >
  
  <div class="custom-dialog-header">
    <div class="title-box">
      <div class="title">{{$t('message.xmindMap.export')}}</div>
    </div>
    <svg class="close-icon" @click="cancel">
        <use xlink:href="#keowledge-danchuangguanbi1"></use>
    </svg>
  </div>
  <div class="exportContainer">
    <div class="nameInputBox">
      <span class="name">{{$t('message.text.exportFileName')}}</span>
      <el-input
        style="max-width: 300px"
        v-model="fileName"
        size="mini"
        @keydown.stop
      ></el-input>
      <el-checkbox
        v-show="['smm', 'json'].includes(exportType)"
        v-model="widthConfig"
        style="margin-left: 12px"
        >{{$t('message.text.includeConfig')}}</el-checkbox
      >
    </div>
    <div
        class="paddingInputBox"
        v-show="['svg', 'png', 'pdf'].includes(exportType)"
      >
      <div class="paddingInputGroup">
        <span class="name">{{$t('message.text.horizontalInnderMargin')}}</span>
        <el-input
          style="max-width: 100px"
          v-model="paddingX"
          size="mini"
          @change="onPaddingChange"
          @keydown.stop
        ></el-input>
      </div>
      <div class="paddingInputGroup">
        <span class="name">{{$t('message.text.verticalInnderMargin')}}</span>
        <el-input
          style="width: 100px"
          v-model="paddingY"
          size="mini"
          @change="onPaddingChange"
          @keydown.stop
        ></el-input>
      </div>
      <div class="paddingInputGroup">
        <el-checkbox
          v-show="['png', 'pdf'].includes(exportType)"
          v-model="isTransparent"
          >{{$t('message.text.backgroundTrans')}}</el-checkbox
        >
      </div>
    </div>
    <div class="downloadTypeList">
        <div
          class="downloadTypeItem"
          v-for="item in downTypeList"
          :key="item.type"
          :class="{ active: exportType === item.type }"
          @click="exportType = item.type"
        >
          <div class="icon xmind-iconfont" :class="[item.icon, item.type]"></div>
          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    <div class="tip">{{$t('message.text.exprotTips')}}</div>
  </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{$t('message.buttons.cancal')}}</el-button>
        <el-button type="primary" @click="confirm">{{$t('message.buttons.submit')}}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import $eventBus from "@/utils/eventBus";
import { downTypeList } from './config'
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  name:{
    type:String,
    default:'思维导图'
  }
})

const dialogVisible = ref(false)
const exportType = ref("smm")
const fileName = ref()
const widthConfig = ref(true)
const isTransparent = ref(false)
const loadingText = ref('')
const paddingX = ref(10)
const paddingY= ref(10)

onMounted(()=>{
  fileName.value = props.name
  $eventBus.$on("showExport", () => {
    dialogVisible.value = true;
  });
})

/**
 * @Desc: 取消
 */
function cancel() {
  dialogVisible.value = false;
  fileName.value = props.name
}

/**
 * @Author: 王林
 * @Date: 2021-06-06 22:28:20
 * @Desc:  确定
 */
function confirm() {
  if (exportType.value === 'svg') {
    $eventBus.$emit(
      'xmindEport',
      exportType.value,
      true,
      fileName.value,
      `* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }`
    )
  } else if (['smm', 'json'].includes(exportType.value)) {
    $eventBus.$emit(
      'xmindEport',
      exportType.value,
      true,
      fileName.value,
      widthConfig.value
    )
  } else if (exportType.value === 'png') {
    $eventBus.$emit(
      'xmindEport',
      exportType.value,
      true,
      fileName.value,
      isTransparent.value
    )
  } else if (exportType.value === 'pdf') {
    $eventBus.$emit(
      'xmindEport',
      exportType.value,
      true,
      fileName.value,
      isTransparent.value
    )
  } else {
    $eventBus.$emit('xmindEport', exportType.value, true, fileName.value)
  }
  proxy.$notify.info({
      title: $t('message.tooltips.informations'),
      message: $t('message.message.ifNotDownloadCheckBrowser')
    });
  cancel();
}
function onPaddingChange() {
  $eventBus.$emit('paddingChange', {
    exportPaddingX: Number(paddingX.value),
    exportPaddingY: Number(paddingY.value)
  })
}
</script>
<style lang="scss" scoped>
.nodeDialog {
  @include fontFamily;
  .exportContainer{
    background-color: #ebf0f9;
    padding: 30px 20px;
  }
  .nameInputBox {
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .name {
      margin-right: 10px;
    }
  }
  .paddingInputBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .paddingInputGroup {
      margin-right: 12px;
      margin-bottom: 12px;

      &:last-of-type {
        margin-right: 0;
      }
    }

    .name {
      margin-right: 10px;
    }
  }
  .downloadTypeList {
    display: flex;
    flex-wrap: wrap;
    .downloadTypeItem {
      width: 200px;
      height: 88px;
      padding: 22px;
      overflow: hidden;
      margin: 10px;
      border-radius: 11px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.02);
      background-color: #fff;
      display: flex;
      align-items: center;
      cursor: pointer;
      border: 2px solid transparent;
      box-sizing: border-box;
      &.active {
        border-color: #409eff;
      }

      .icon {
        font-size: 30px;
        margin-right: 10px;
        flex-shrink: 0;

        &.png {
          color: #ffc038;
        }

        &.pdf {
          color: #ff6c4d;
        }

        &.md {
          color: #2b2b2b;
        }

        &.json {
          color: #12c87e;
        }

        &.svg {
          color: #4380ff;
        }

        &.smm {
          color: #409eff;
        }

        &.xmind {
          color: #f55e5e;
        }

        &.txt {
          color: #70798e;
        }
      }

      .info {
        width: 100%;
        overflow: hidden;

        .name {
          color: #1a1a1a;
          font-size: 15px;
          margin-bottom: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .desc {
          color: #999;
          font-size: 12px;
          display: -webkit-box; /* 必须设置display属性为-webkit-box */
          overflow: hidden; /* 超出部分隐藏 */
          text-overflow: ellipsis; /* 显示省略号 */
          -webkit-line-clamp: 2; /* 限制显示两行 */
          -webkit-box-orient: vertical; /* 垂直方向上的换行 */
        }
      }
    }
  }
  .tip {
    margin-top: 10px;
  }
}
</style>